<template>
	<view>
		<!-- 输入框验证码 -->
		<view class="inputBox">
			<u--input placeholder="请输入手机号" type="text" border="bottom" disabled disabledColor="#fff" clearable
				v-model="formData.mobile"></u--input>
			<!-- #ifndef APP-NVUE -->
			<u-input placeholder="请输入验证码" type="text" border="bottom" v-model="formData.code">
				<!-- #endif -->
				<!-- #ifdef APP-NVUE -->
				<u--input placeholder="请输入验证码" type="text" border="bottom" v-model="formData.code">
					<!-- #endif -->
					<template #suffix>
						<view class="countDown" v-if="formData.dis">
							{{ formData.count }}秒后可重新获取
						</view>
						<view class="countDown" v-if="!formData.dis" @click="sendCode">
							获取验证码
						</view>
					</template>
					<!-- #ifndef APP-NVUE -->
			</u-input>
			<!-- #endif -->
			<!-- #ifdef APP-NVUE -->
			</u--input>
			<!-- #endif -->
			<!-- 密码1 -->
			<!-- #ifndef APP-NVUE -->
			<u-input placeholder="请输入密码" :type="formData.passwrdType1" border="bottom" v-model="formData.password1">
				<!-- #endif -->
				<!-- #ifdef APP-NVUE -->
				<u--input placeholder="请输入密码" :type="formData.passwrdType1" border="bottom"
					v-model="formData.password1">
					<!-- #endif -->
					<template #suffix>
						<view class="" @click="changeInput(1)">
							<u-icon :name="formData.passwrdType1=='password'?'eye-fill':'eye'"></u-icon>
						</view>
					</template>
					<!-- #ifndef APP-NVUE -->
			</u-input>
			<!-- #endif -->
			<!-- #ifdef APP-NVUE -->
			</u--input>
			<!-- #endif -->
			<!-- 密码2 -->
			<!-- #ifndef APP-NVUE -->
			<u-input placeholder="请输入密码" :type="formData.passwrdType2" border="bottom" v-model="formData.password2">
				<!-- #endif -->
				<!-- #ifdef APP-NVUE -->
				<u--input placeholder="请输入密码" :type="formData.passwrdType2" border="bottom"
					v-model="formData.password2">
					<!-- #endif -->
					<template #suffix>
						<view class="" @click="changeInput(2)">
							<u-icon :name="formData.passwrdType2=='password'?'eye-fill':'eye'"></u-icon>
						</view>
					</template>
					<!-- #ifndef APP-NVUE -->
			</u-input>
			<!-- #endif -->
			<!-- #ifdef APP-NVUE -->
			</u--input>
			<!-- #endif -->
		</view>
		<!-- 输入框密码 -->
		<!-- 按钮 -->
		<view class="submitBox" @click="submit">
			确认
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, ref } from "vue";
	import {
		useRouter
	} from 'uni-mini-router'
	import {
		getCurrentInstance
	} from 'vue'
	import {
		validatePhoneNumber
	} from '@/utlis/common.js'
	import {
		onShow,
		onHide,
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		userStore
	} from '@/pinia';
	let router = useRouter()
	const userStoreInfo = userStore();
	let userInfo = ref(userStoreInfo.getUserInfo)
	const userRole = ref(userStoreInfo.getUserFlag)
	const {
		proxy,
	} = getCurrentInstance()
	let formData = reactive({
		mobile: '',
		password1: '',
		password2: '',
		code: '',
		passwrdType1: 'password',
		passwrdType2: 'password',
		dis: false,
		count: 0,
	})
	formData.mobile = userStoreInfo.userInfo.phone
	const sendCode = (e) => {
		if (!validatePhoneNumber(formData.mobile)) {
			uni.showToast({
				title: '手机号不合法',
				icon: 'none'
			})
			return
		}
		proxy.$req('POST', proxy.$api.getCode, {
			mobile: formData.mobile,
			smsmode: '1'
		}).then((res) => {
			// console.log(res);
			uni.showToast({
				title: res.message,
				icon: 'none'
			})
			if (res.success) {
				getCode()
			}
		})
	}
	const linkRegister = () => {
		uni.navigateBack()
	}
	const changeInput = (e) => {
		if (e == 1) {
			if (formData.passwrdType1 == 'text') {
				formData.passwrdType1 = 'password'
			} else {
				formData.passwrdType1 = 'text'
			}
		} else {
			if (formData.passwrdType2 == 'text') {
				formData.passwrdType2 = 'password'
			} else {
				formData.passwrdType2 = 'text'
			}
		}
	}
	const getCode = () => {
		// 开始计时，结束后重新发送
		let TIME_COUNT = 120;
		let timer = null;
		let show = true;
		if (!timer) {
			formData.count = TIME_COUNT;
			show = false;
			formData.dis = true;
			timer = setInterval(() => {
				if (formData.count > 0 && formData.count <= TIME_COUNT) {
					formData.count--;
				} else {
					formData.dis = false;
					show = true;
					clearInterval(timer);
					timer = null;
				}
			}, 1000);
		}
	}
	const submit = () => {
		if (!validatePhoneNumber(formData.mobile)) {
			uni.showToast({
				title: '手机号不合法',
				icon: 'none'
			})
			return
		}
		if (formData.code.length < 4) {
			uni.showToast({
				title: '验证码不合法',
				icon: 'none'
			})
			return
		}
		if (formData.password1 !== formData.password2) {
			uni.showToast({
				title: '两次密码输入的不一致',
				icon: 'none'
			})
			return
		}
		if (formData.password1.length < 4) {
			uni.showToast({
				title: '密码不合法',
				icon: 'none'
			})
			return
		}
		proxy.$req('POST', proxy.$api.forget, {
			code: formData.code,
			password: formData.password1,
			phone: formData.mobile
		}, '').then((res) => {
			// console.log(res);
			uni.showToast({
				title: res.message,
				icon: 'none'
			})
			if (res.success) {
				setTimeout(() => {
					userStoreInfo.loginOut().then(() => {
						uni.showLoading({})
						setTimeout(() => {
							uni.hideLoading()
							router.replaceAll({
								name: 'login',
								params: {}
							})
						}, 600)
					})
				}, 1000)
				//存用户信息
				// userStoreInfo.doLogin(res.result, uni.getStorageSync('roleFlag'))
				//是否认证
				// if (uni.getStorageSync('roleFlag') == 1 && res.result.shoppingStore == 0) {
				// 	router.push({
				// 		name: 'authRole',
				// 		params: {}
				// 	})
				// } else if (uni.getStorageSync('roleFlag') == 2 && res.result.supplier == 0) {
				// 	router.push({
				// 		name: 'authRole',
				// 		params: {}
				// 	})
				// } else {
				// 	router.pushTab({
				// 		name: 'index',
				// 		params: {}
				// 	})
				// }
			}
		})
	}
</script>

<style lang="scss">
	::v-deep() {
		.u-tabs__wrapper__nav__item {
			align-items: flex-end;
		}
	}

	page {
		background-color: #fafafa;
	}

	view {
		box-sizing: border-box;
	}

	.inputBox {
		width: 96%;
		height: 460rpx;
		margin: 50rpx auto 0;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;
		padding: 10rpx 32rpx;
	}

	.countDown {
		font-size: 26rpx;
		color: #c4c9cf;
	}

	.submitBox {
		width: 90%;
		height: 80rpx;
		line-height: 80rpx;
		color: #fff;
		background-color: #CB645E;
		border-radius: 60rpx;
		text-align: center;
		margin: 80rpx auto 30rpx;
		font-size: 30rpx
	}
</style>